{extend name="common/plugin_layout" /}
{block name="title"}{$plugin.title} - {:config_get('title')}{/block}
{block name="main"}
<style>
.btn-block {
	white-space:normal;
}
</style>
<div class="container-xl" id="app">
<div class="col-sm-12 col-md-10 col-xl-8 center-block">
    <div class="card card-preview">
        <div class="card-inner mt-3">
            <div class="nya-title nk-ibx-action-item progress-rating">
                <span class="nk-menu-text font-weight-bold">文件哈希计算</span>
            </div>
            <div class="progress progress-lg mt-1 mb-1">
                <div class="progress-bar progress-bar-striped progress-bar-animated" v-bind:style="{ width: progress + '%' }">{{progress}}%</div>
            </div>
            <div class="form-group">
                <label class="form-label">文件选择</label>
                <div class="text-center pt-5 pb-5 btn btn-lg btn-block btn-outline-light mb-4 d-block">
                    <div class="preview-icon-wrap"><em class="ni ni-upload"></em></div><span>拖拽文件到这里或者点击选择文件</span>
                    <input type="file" id="file" multiple="multiple" style="opacity: 0;position: absolute;cursor: pointer;width: 100%;height: 100%;left: 0;top: 0;" @change="selectFile">
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">生成选项：</label>
                <div class="form-control-wrap">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="customCheck1" v-model="set.md5"><label class="custom-control-label" for="customCheck1">MD5</label>
                    </div>
                    <div class="custom-control custom-checkbox ml-1">
                        <input type="checkbox" class="custom-control-input" id="customCheck2" v-model="set.sha1"><label class="custom-control-label" for="customCheck2">SHA1</label>
                    </div>
                    <div class="custom-control custom-checkbox ml-1">
                        <input type="checkbox" class="custom-control-input" id="customCheck5" v-model="set.sha256"><label class="custom-control-label" for="customCheck5">SHA256</label>
                    </div>
                    <div class="custom-control custom-checkbox ml-1">
                        <input type="checkbox" class="custom-control-input" id="customCheck7" v-model="set.sha512"><label class="custom-control-label" for="customCheck7">SHA512</label>
                    </div>
                    <div class="custom-control custom-checkbox ml-1">
                        <input type="checkbox" class="custom-control-input" id="customCheck8" v-model="set.ripemd160"><label class="custom-control-label" for="customCheck8">RIPEMD160</label>
                    </div>
                    <div class="custom-control custom-checkbox ml-1">
                        <input type="checkbox" class="custom-control-input" id="customCheck9" v-model="set.crc32"><label class="custom-control-label" for="customCheck9">CRC32</label>
                    </div>
                </div>
            </div>
            <div class="form-group mt-3" id="resultdiv" v-show="result">
                <label class="form-label">结果：</label>
                <div class="border p-2" v-html="result">
                </div>
            </div>
        </div>
    </div>
    <div class="card card-preview">
        <div class="card-inner">
            <h6><em class="icon ni ni-info"></em> 工具说明</h6>
            <div class="accordion-inner">
                <p>可同时选择多个文件计算</p>
                <p>使用crypto-js 本地计算，文件不会被上传到服务器</p>
            </div>
        </div>
    </div>
</div>
</div>
{/block}
{block name="script"}
<script src="{$cdn_cdnjs}vue/2.6.14/vue.min.js"></script>
<script src="{$cdn_cdnjs}crypto-js/4.1.1/crypto-js.min.js"></script>
<script src="/static/js/crc32.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            set: {
                md5: true,
                sha1: true,
                sha256: false,
                sha512: false,
                ripemd160: false,
                crc32: false,
            },
            algorithms: [
                'md5',
                'sha1',
                'sha256',
                'sha512',
                'ripemd160',
                'crc32',
            ],
            result: '',
            progress: 0,
        },
        created() {
        },
        methods: {
            swapendian32(val) {
                return (((val & 0xFF) << 24)
                | ((val & 0xFF00) << 8)
                | ((val >> 8) & 0xFF00)
                | ((val >> 24) & 0xFF)) >>> 0;
            },
            arrayBufferToWordArray(arrayBuffer) {
                var fullWords = Math.floor(arrayBuffer.byteLength / 4);
                var bytesLeft = arrayBuffer.byteLength % 4;

                var u32 = new Uint32Array(arrayBuffer, 0, fullWords);
                var u8 = new Uint8Array(arrayBuffer);

                var cp = [];
                for (var i = 0; i < fullWords; ++i) {
                    cp.push(this.swapendian32(u32[i]));
                }

                if (bytesLeft) {
                    var pad = 0;
                    for (var i = bytesLeft; i > 0; --i) {
                        pad = pad << 8;
                        pad += u8[u8.byteLength - i];
                    }

                    for (var i = 0; i < 4 - bytesLeft; ++i) {
                        pad = pad << 8;
                    }

                    cp.push(pad);
                }

                return CryptoJS.lib.WordArray.create(cp, arrayBuffer.byteLength);
            },
            progressiveRead(file, work, done) {
                return new Promise((resolve) => {
                    var chunkSize = 2097152; // 256KiB at a time
                    var pos = 0;
                    var reader = new FileReader();

                    function progressiveReadNext() {
                        var end = Math.min(pos + chunkSize, file.size);

                        reader.onload = function (e) {
                            pos = end;
                            work(e.target.result, pos, file);
                            if (pos < file.size) {
                                progressiveReadNext();
                            }
                            else {
                                // Done
                                resolve(file);
                            }
                        }

                        if (file.slice) {
                            var blob = file.slice(pos, end);
                        }
                        else if (file.webkitSlice) {
                            var blob = file.webkitSlice(pos, end);
                        }
                        reader.readAsArrayBuffer(blob);
                    }

                    progressiveReadNext();
                })
            },
            async hash(file,total,id) {
                var that = this;
                var contents = [];
                for (var v of Object.keys(this.set)) {
                    if (this.set[v]){
                        if(v == 'crc32'){
                            var crc32intermediate = 0;
                        }else{
                            contents[v] = CryptoJS.algo[v.toUpperCase()].create();
                        }
                    }
                }
                await this.progressiveRead(file, function (data, pos, file) {
                    var wordArray = that.arrayBufferToWordArray(data);
                    for (var v of Object.keys(contents)) {
                        contents[v].update(wordArray)
                    }
                    if(typeof crc32intermediate !== "undefined"){
                        crc32intermediate = crc32(new Uint8Array(data), crc32intermediate);
                    }
                    var progressRate = Math.round(pos / file.size / total * 100 + (id-1) / total * 100);
                    that.progress = progressRate;
                });
                var result = [];
                for (var v of Object.keys(contents)) {
                    result[v] = contents[v].finalize().toString();
                }
                if(typeof crc32intermediate !== "undefined"){
                    if(crc32intermediate < 0) crc32intermediate = 0xFFFFFFFF + crc32intermediate + 1;
                    result['crc32'] = crc32intermediate.toString(16);
                }
                return result;
            },
            async selectFile(e) {
                var total = e.target.files.length;
                let loading = layer.msg('正在计算中', {icon: 16,shade: 0.1,time: 0});
                let list = '';
                var i = 1;
                for (const file of e.target.files) {
                    list += `<span class="font-weight-bold text-primary">${file.name}</span>（${file.size} bytes）<br/>`;
                    await this.hash(file,total,i++).then(res => {
                        for (var v of Object.keys(res)) {
                            list += `<b>${v.toUpperCase()}：</b>${res[v]}<br/>`
                        }
                    })
                    list += '<br/>';
                }
                this.result = list
                layer.close(loading);
                $("#file").val('');
            },
            reset(){
                this.result = '';
                this.progress = 0;
            }
        },
    })
</script>
{/block}